<template>
  <div class="home-head" ref="homeHead">
    <LogoPanel class="logo"></LogoPanel>
    <MainTabs
      class="tab"
      :model-value="modelValue"
      :options="tabOptions"
      @update:model-value="(v) => $emit('update:modelValue', v)"
    ></MainTabs>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import LogoPanel from '@/components/cards/LogoPanel.vue'
import MainTabs from '@/components/tabs/MainTabs.vue'
import { usePreventTouchmove } from '@/compositions/mobile/preventTouchmove'
import { TAB_TYPE } from '@/constant/home'

defineProps({
  modelValue: {
    type: Number,
    required: true,
  },
})

defineEmits(['update:modelValue'])

const { isDesktop } = storeToRefs(useAppStore())
const defaultOptions = [
  { label: 'common.follow', value: TAB_TYPE.FOLLOW },
  { label: 'common.foryou', value: TAB_TYPE.FORYOU },
]
const externalOptions = [
  { label: 'title.popularCategory', value: TAB_TYPE.POPULAR_CATEGORY },
  { label: 'title.popularCreator', value: TAB_TYPE.POPULAR_CREATOR },
]

const tabOptions = computed(() => (isDesktop.value ? [...defaultOptions, ...externalOptions] : defaultOptions))

const homeHead = ref(null)
usePreventTouchmove(homeHead)
</script>

<style lang="scss" scoped>
.home-head {
  width: calc(100% - 2rem);
  height: 2.625rem;
  margin: 0 1rem 0.375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 0.5rem;
}

.desktop {
  .home-head {
    width: 100%;
    height: 4.8125rem;
    margin: 0;
    display: initial;

    .logo {
      position: absolute;
      top: 1.25rem;
      left: 1.25rem;
    }

    .tab {
      position: absolute;
      top: 0.75rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
